<template>
  <div class="Welcome">
    <div class="selected" v-if="show">
      已选条件：
      <ul>
        <li v-for="(item, index) in taglist" :key="index" @click="del(index)">{{item.tag}}</li>
      </ul>
      <hr>
    </div>
    <div class="choose">
      <div class="first" v-if="List[0].type">
        所在地：
      <ul>
        <li v-for="(item, index) in List[0].arr" :key="index" @click="add(item, 0)">{{item}}</li>
      </ul>
      <hr>
      </div>
      <div class="second" v-if="List[1].type">
        院校类型：
      <ul>
        <li v-for="(item, index) in List[1].arr" :key="index" @click="add(item, 1)">{{item}}</li>
      </ul>
      <hr>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Welcome',
  data () {
    return {
      show: false,
      tag: '',
      taglist: [],
      place: [],
      type: [],
      list: [],
      show_one: true,
      show_two: true
    }
  },
  computed: {
    List () {
      return [{
        type: true,
        arr: this.place
      }, {
        type: true,
        arr: this.type
      }]
    }
  },
  created () {
    this.place = ['四川', '北京']
    this.type = ['综合', '工科']
  },
  mounted () {
    // this.list = [{
    //   type: true,
    //   arr: this.place
    // }, {
    //   type: true,
    //   arr: this.type
    // }]
    // console.log(this.list[0].type)
  },
  methods: {
    add: function (item, index) {
      this.List[index].type = false
      // if (!this.tag || this.tag.trim() == "") {
      //   return false;
      // }
      // if (this.taglist.length > 0) {
      //   for (var i in this.taglist) {
      //     if (this.taglist[i].tag == this.tag) {
      //       return false;
      //     }
      //   }
      // }
      // if (this.taglist.length >= 10) {
      //   this.taglist.push({
      //     "tag": this.tag
      //   });
      //   this.taglist.splice(0, 1);
      //   this.tag = "";
      // } else {
      //   this.taglist.push({
      //     "tag": this.tag
      //   });
      //   this.tag = "";
      // }
      if (this.taglist.length > 0) {
        for (const i in this.taglist) {
          if (this.taglist[i].tag === item) {
            return
          }
        }
      }
      this.taglist.push({
        tag: item,
        index: index
      })
      this.show = true
      console.log(item)
    },
    del: function (index) {
      // console.log(this.taglist[index].index)
      const flag = this.taglist[index].index
      this.List[flag].type = true
      this.taglist.splice(index, 1)
      if (this.taglist.length === 0) {
        this.show = false
      }
    }
  }

}
</script>

<style lang="scss" scoped>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tag {
  width: 300px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding-left: 5px;
}
.btn {
  background-color: #008CFF;
  color: #fff;
  width: 100px;
  height: 32px;
  line-height: 32px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
.taglist li {
  float: left;
  padding: 3px 10px;
  background-color: #2ECC71;
  border-radius: 5px;
  color: #fff;
  font-size: 20px;
  margin: 0 10px 0 0;
  cursor: pointer;
}
</style>
